<template>
  <div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      background-color="black"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="头像" width="150">
        <template #default="scope">
          <img :src="baseApi + scope.row.url" min-width="100" height="100" />
        </template>
      </el-table-column>

      <el-table-column
        prop="type"
        label="文件类型"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="size"
        label="文件大小"
        width="180"
      ></el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <!-- 下载 -->
          <a :href="baseApi + scope.row.url">
            <el-button type="success" style="font-size: 18px"> 下载 </el-button>
          </a>
          <!-- 删除 -->
          <el-button
            type="danger"
            style="margin-left: 10px; font-size: 18px"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="flex: 0 0 auto">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import { ElMessageBox } from "element-plus";

const store = useStore();

// Reactive data
const baseApi = ref<string>(store.state.baseApi);
const tableData = ref<any[]>([]);
const total = ref<number>(0);
const pageSize = ref<number>(5);
const currentPage = ref<number>(1);
const multipleSelection = ref<any[]>([]);

// Methods
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  load();
};

const handleCurrentPage = (page: number) => {
  currentPage.value = page;
  load();
};

const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
};

const load = () => {
  store.state.request
    .get("/avatar/page", {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
      },
    })
    .then((res: any) => {
      if (res.code === "200") {
        tableData.value = res.data.records.map((item: any) => {
          let size = item.size;
          if (size < 1024) {
            item.size = size + " Kb";
          } else if (size > 1024 && size < 1024 * 1024) {
            item.size = (size / 1024).toFixed(2) + " Mb";
          } else {
            item.size = (size / 1024 / 1024).toFixed(2) + " Gb";
          }
          return item;
        });
        total.value = res.data.total;
      }
    });
};

const search = () => {
  currentPage.value = 1;
  load();
};

const handleDelete = (id: any) => {
  ElMessageBox.confirm("确认删除该文件吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    store.state.request.delete("/avatar/" + id).then((res: any) => {
      if (res.code === "200") {
        store.state.message.success("删除成功");
        load();
      } else {
        store.state.message.error(res.msg);
      }
    });
  });
};

// Lifecycle
onMounted(() => {
  load();
});
</script>

<style scoped></style>
